<template>
	<view class="collect">
		<view class="time_collect">
			<!-- 筛选条件 -->
			<view class="collect-tab">
				<view class="pre_list">
						<picker mode="date" fields="month" @change="changeDataTime">
							<view class="form_right">
								<view style="margin-right:15rpx">{{dataTime ? dataTime : '点击选择'}}</view>
								<view class="iconfont icon-down-arrow"></view>
							</view>
						</picker>
					
						<view>合计：￥{{totalAmount||0}}</view>
						<picker  @change="changeStaff"  :disabled="oneStaff" :range-key="'name'" :range="staffList" :value="staffIndex">
								<view class="form_right">
									<view>{{staffname ? staffname : '点击选择'}}</view>
									<view class="iconfont icon-arrows_right"></view>
								</view>
						</picker>   
				</view>
			</view>
			 <view class="fllow_item" v-for="(item,index) in lists" :key="index">
			 	<view class="item_content" @click.stop="clientClick123(item,index)">
			 		<view class="con_img">
			 			<!-- <image :src="BASE_IMG_URL+ 'defgoods.png'" class="headerimg"  mode="scaleToFill"></image> -->
						<view class="main_first">
			 				<view class="main_title">
			 					<view class="f_l_yop">
			 						<view style="font-weight: bold;">下单门店：{{item.store_name}}</view>
			 						<view  style="margin-top: 10rpx;">{{item.member_name}}--{{item.goods_name}}</view>
			 						<view>{{item.addTimeStr}}</view>
			 					</view>
			 					<view class="f_l_bottom" style="margin-top: 30rpx;">
									<view class="main_type daofang">
			 							 核算业绩：{{item.amount}}元
			 						</view> 
			 					</view> 
			 				</view>
			 				<view class="fontColor main_time">订单号：{{item.order_id}}</view>
			 			</view>
			 		</view> 
			 	</view>
			 </view>
			 <view style="height: 200rpx;"></view>
			 <u-empty v-if="lists.length == 0" text="暂无更多"></u-empty>
		</view>
	</view>
</template>

<script>
	import { BASE_IMG_URL } from '@/util/api.js'
	import { netPrevCustomer, netLianxiren, netStaffList, netContractDetail, netEditContract } from '@/api/kehu.js'
	import { netAddDataRank, netPersonalData, netTeamData , netGetStaffArchieveDetailData} from '@/api/index.js'
	import { getNowData } from '@/util/weekTime.js'
	import { getCurrentMonthDay } from '@/util/util.js'
	
	// import uniEcCanvas from '@/components/uni-ec-canvas/uni-ec-canvas.vue';
	// import * as echarts from '@/components/uni-ec-canvas/echarts';
	// import uniPagination from '@/components/uni-pagination/uni-pagination.vue';
	export default {
		data() {
			return {
				
				page:1,
				limit:10,
				totalPage:1, 
				totalAmount:0, 
				BASE_IMG_URL:BASE_IMG_URL,
				lists:[],
				oneStaff:false,
				staffname:'',
				staffList:[],
				staffIndex: null,
				staff_id:null,
				
				dateyear:'',  //年
				dataTime:'',
				 
				//本人及下属   按年还是按月 筛选
				typeList:['按年','按月'],
				typeIndex:0,
				typeYear:''
			}
		},
		onLoad(options) {
			if(options.id) {
				this.staff_id = options.id 
				this.oneStaff = true
			}
		},
		
		onShow() {
			let date = new Date()
			let year = date.getFullYear()
			this.dateyear = year
			this.typeYear = year
			
			this.dataTime = getNowData().substr(0,7)
			
			this.getStaffList()
			
			this.getList()
		},
		methods: {
			changeDataTime(e) {
				this.dataTime = e.detail.value
				this.page = 1
				this.lists = []
				this.getList()
			},
			//员工列表
			getStaffList() {
				let that = this
				netStaffList().then(res=>{
					this.staffList = res.data
					if(that.staff_id) {
						this.staffList.forEach((one, index) => {
							if(one.id == that.staff_id) {
								that.staffname = one.name
								that.staffIndex = index
							}
						})
					}
					
				})
			},
			//公司签约人
			changeStaff(e) {
				this.staffIndex = e.detail.value
				console.log("===========")
				this.staff_id = this.staffList[e.detail.value].id
				this.staffname = this.staffList[e.detail.value].name
				this.page = 1
				this.lists = []
				this.getList()
			},
			getList() {
				let params = {
					page: this.page,
					limit: this.limit,
					type: 2,//手工费
					date: this.dataTime,
					staff_id: this.staff_id
				}
				netGetStaffArchieveDetailData(params).then(res=>{
					this.lists = this.lists.concat(res.data.list.list)
					this.totalAmount = (res.data.totalAmount)
					this.totalPage = res.data.totalPage 
				})
			}, 
			handleTime(time) {
				let year = time.slice(0,time.indexOf('-'))
				let month = time.slice(time.indexOf('-')+1)
				let obj = getCurrentMonthDay(year,month)
				return obj
			}, 
		},
		components: {
			// uniEcCanvas,
			// uniPagination
		},
		onReady() {
			
		}
	}
</script>

<style scoped lang="scss">
	
	.fllow_item {
		position: relative;
		margin-top: 10rpx;
		.unread{
			width:10rpx;
			height:10rpx;
			border-radius: 50%;
			position: absolute;
			right:5rpx;
			top:5rpx;
			background:#F43F3B;
		}
		.item_data {
			margin: 30rpx 0;
	
			&::before {
				content: '';
				display: inline-block;
				margin: 0 15rpx 0 24rpx;
				width: 20rpx;
				height: 20rpx;
				border-radius: 10rpx;
				border: 2rpx solid #03aa96;
			}
		}
	
		.item_content {
			display: block;
			background-color: #fff;
			padding: 24rpx 24rpx; 
			border-radius: 10rpx;
			margin-bottom: 30rpx;
	
			.con_img {
				display: flex;
				.main_first {
					margin-bottom: 25rpx;
					padding-left: 25rpx;
					flex: 1;
					.main_time{
						line-height: 25px;
					}
					.main_title{
						display: flex;
						width: 100%;
						justify-content: space-between;
						.first_left {
							display: flex;
						
							:first-child {
								font-size: 32rpx;
								margin-right: 10rpx;
								margin-top: -3rpx;
							}
						
							:last-child {
								margin-top: 2rpx;
							}
						}
						.main_type{
							padding:5rpx 20rpx;
							border-radius: 10rpx;
							color:#03aa96;
						}
						.daofang{
							// background:#03aa96;
						}
						.genjin{
							background:#ff7800;
						}
						.other{
							background:#1CBBB4;
						}
					}
					
				}
				image {
					width: 100rpx;
					height: 100rpx;
					border-radius: 50%;
				}
			}
	
			.con_main {
				flex: 1;
				.main_second{
					padding-bottom:20rpx;
				}
				
				.main_img{
					display: flex;
					justify-content: flex-start;
					align-items: center;
					flex-wrap: wrap;
					margin-top: 20rpx;
					.imgbox{
						padding: 10rpx;
						border-radius: 5rpx;
						border:1rpx solid #CCCCCC;
						width:160rpx;
						height:160rpx;
						margin-right:14rpx;
						margin-bottom:14rpx;
					}
				}
				.main_third {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin: 20rpx 0 10rpx;
	
					.third_left {
						display: flex;
						align-items: center;
						.icon-clock{
							font-size:32rpx;
						}
						.lxs_time{
							margin-left: 5px;
							font-size:26rpx;
						}
					}
					.third_right {
						display: flex;
						.right_num {
							display: flex;
							:last-child {
								margin-right: 20rpx;
							}
						}
	
						.icon-arrows_right {
							margin-top: -4rpx;
						}
					}
				}
	
				.main_fourth {
					padding-bottom: 10rpx;
				}
			}
		}
	}
	.collect-tab{
		background:#fff;
		.pre_list{
			display:flex;
			justify-content: space-between;
			align-items: center;
			padding:20rpx 30rpx;
			.pre_title {
				font-size: 28rpx;
				font-weight: 700;
			}
			.form_right{
				// width:220rpx;
				height:40rpx;
				font-size:24rpx;
				color:#333;
				text-align: center;
				line-height: 38rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.rightlist{
				display: flex;
				justify-content: flex-end;
				align-items: center;
				.libox{
					margin-left:24rpx;
				}
			}
		}
	}
	
	.collect {
		.time_collect,
		.people_collect {
			.line_header {
				background-color: #fff;

				.scroll {
					white-space: nowrap;
					width: 750rpx;
					overflow: hidden;

					.line_chart {
						height: 600rpx;
						width: 2000rpx;
					}
				}
			}

			.achievement_body {
				margin: 30rpx;

				.achievement_title {
					border-radius: 10rpx;
					padding: 20rpx 0 40rpx;
					background-color: #fff;
					display: flex;
					text-align: center;

					.title_item {
						width: 33.33%;

						:first-child {
							padding: 20rpx;
							color: #ccc;
						}
					}
				}
			}

			.achievement_footer {
				margin:20rpx 0 30rpx;
				overflow: hidden;
				.footer_table {
					display: flex;

					.table_time {
						width: 150rpx;
						white-space: nowrap;
						.item_title {
							padding-left: 20rpx;
							font-weight: 700;
							height: 90rpx;
							line-height: 90rpx;
							border: 1rpx solid #f2f2f2;
							border-right: 0;
						}
						.time_item {
							padding-left: 20rpx;
							height: 90rpx;
							line-height: 90rpx;
							background-color: #fff;
							border-bottom: 1rpx solid #EAEAEA;

						}
					}
					.scroll {
						white-space: nowrap;
						width: 600rpx;
						overflow: hidden;
						.con_title {
							.title_head {
								display: inline-block;
								width: 200rpx;
								height: 90rpx;
								line-height: 90rpx;
								text-align: center;
								border-top: 1rpx solid #f2f2f2;
								border-bottom: 1rpx solid #f2f2f2;
							}

							:last-child {
								border-right: 1rpx solid #f2f2f2;
							}
						}

						.con_content {
							.content_item {
								.con_data {
									display: inline-block;
									width: 200rpx;
									height: 90rpx;
									line-height: 90rpx;
									text-align: center;
									background-color: #fff;
									border-bottom: 1rpx solid #EAEAEA;
								}
							}
						}
					}
				}
			}
		}

		.pagination_demo {
			background-color: #fff;
			padding: 30rpx 60rpx;
			margin: 0 30rpx;
		}

		.van_po {
			position: absolute;
			.screen_con {
				z-index: 9999;
				background-color: #fff;

				.screen_title {
					display: flex;
					justify-content: space-between;
					padding: 20rpx 20rpx 20rpx 24rpx;
					border-bottom: 1rpx solid #EAEAEA;

					:first-child {
						font-size: 28rpx;
						font-weight: 700;
					}
				}

				.screen_style {
					.style_title {
						padding-left: 24rpx;
						padding-top: 30rpx;
					}

					.style_con {
						display: flex;
						width: 560rpx;
						flex-wrap: wrap;
						text-align: center;
						padding-left: 9rpx;

						.style_item {
							width: 150rpx;
							height: 60rpx;
							line-height: 60rpx;
							border: 1rpx solid #f4f4f4;
							margin: 15rpx 15rpx;
							color: #b6b6b6;
						}

						.type_active,
						.time_active {
							border: 1rpx solid #52c1f5;
							color: #52c1f5;
						}
					}

					

					.aff_con {
						display: flex;
						justify-content: center;
						align-items: center;
						text-align: center;
						padding-top: 30rpx;

						.aff_item {
							width: 25%;

							.aff_img {
								margin-bottom: 15rpx;
								margin-left: 44rpx;
								width: 50rpx;
								height: 50rpx;
							}
						}

						.aff_last {
							.aff_img {
								margin-bottom: 15rpx;
								margin-left: 30rpx;
								width: 80rpx;
								height: 50rpx;
							}
						}
					}
				}
				
				.style_input {
					margin: 20rpx;
					border: 1rpx solid #EAEAEA;
					padding-left: 24rpx;
					width: 600rpx;
				
					input {
						display: inline-block;
						height: 80rpx;
					}
				}
			}
		}

		.button_bottom {
			display: flex;
			position: fixed;
			width: 100%;
			bottom: 0;
			right: 0;
			left: 0;
			font-size: 32rpx;
			height: 90rpx;
			text-align: center;

			.reset {
				flex: 1;
				line-height: 90rpx;
				color: #1e89fe;
			}

			.sure {
				flex: 1;
				line-height: 90rpx;
				background-color: #03aa96;
				color: #fff;
			}

		}
	}
</style>
